<template>
  <a-modal v-model="parameters" width="83vw" :dialog-style="{ position:'absolute', right: '2vw', }"
           :title="PaginationData.companyName" :footer="null" :mask="false" destroyOnClose>
    <div class="tabs-class">
      <a-tabs type="card" @change="callback">
        <a-tab-pane key="1" tab="工作参数">
          <a-descriptions title="工作参数" bordered size="small" :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }">
            <template v-for="v in workingInfoData">
              <a-descriptions-item :label="v.name">
                {{v.value.length == 14 ? convertTime(v.value) : v.value }}
              </a-descriptions-item>
              <a-descriptions-item label="更新时间：">
                {{ v.datatime }}
              </a-descriptions-item>
            </template>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="2" tab="校零校满">
          <Calibration ref="Calibration" :status="PaginationData"></Calibration>
        </a-tab-pane>
        <a-tab-pane key="3" tab="标液数据">
          <Calibration ref="Calibration" :status="PaginationData"></Calibration>
        </a-tab-pane>
      </a-tabs>
    </div>

  </a-modal>
</template>

<script>
import moment from "moment";
import Calibration from "@/views/air/components/Calibration"
export default {
  name: "Parameters.vue",
  components:{
    Calibration
  },
  props: {
    PaginationData: {
      type:Object,
      request:true
    }
  },
  data() {
    return {
      moment,
      parameters: false,
      workingInfoData: []
    }
  },
  methods: {
    callback(key) {
      this.PaginationData.status = key;
      this.$nextTick(()=>{
        this.$refs.Calibration.init()
        console.log(this.PaginationData)
        console.log(key);
      })

    },
    // 获取工作参数
    getWorkInfoData() {
      console.log(this.PaginationData)
      this.$api.realTimeControlFindWorkInfo({mn: this.PaginationData.mn, monitorFactorsCode: this.PaginationData.monitorFactorsCode}).then(res => {
        if (res.data.code == 0) {
          if(res.data.data.length === 0){
            this.$message.info("暂无数据")
          }
          res.data.data.forEach(v => {
            v.datatime = moment(v.datatime).format("YYYY/MM/DD HH:mm:ss")
          })
          this.workingInfoData = res.data.data;
        } else {
          this.$message.warning(res.data.errorMessage)
        }
      })
    },
    // 处理时间
    convertTime(time) {
      if (time.length !== 14) {
        return time;
      }
      let str = "";
      str = time.substr(0, 4) + "-" +
          time.substr(4, 2) + "-" +
          time.substr(6, 2) + " " +
          time.substr(8, 2) + ":" +
          time.substr(10, 2)+":"+
          time.substr(12,2);
      return str;
    }
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
::v-deep .ant-modal-body {
  padding: 0 24px 24px;
}

.tabs-class {
  height: 76vh;

  ::v-deep .ant-tabs-bar {
    margin: 0;
  }

  ::v-deep .ant-tabs {
    height: 100%;


    .ant-tabs-top-content {
      width: 100%;
      height: calc(100% - 42px);
      border: 1px solid #e8e8e8;
      border-top: hidden;
      overflow-y: auto;
      > .ant-tabs-tabpane.ant-tabs-tabpane-active{
        height: 100%
      }
    }
  }

  ::v-deep .ant-descriptions-title {
    //color: #37ddc0;
    font-size: 18px;
    margin-bottom: 0;
    line-height: 3;
    border: 1px solid #e8e8e8;
    box-sizing: border-box;
    //background: #207064;
  }
}
</style>